<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>交易记录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weui.css" />
    <link rel="stylesheet" href="/node_modules/LobsterUIFrame/weui/css/weuix.css" />
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.min.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/zepto.weui.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/swipe.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/macy.js"></script>
    <script src="/node_modules/LobsterUIFrame/weui/js/php.js"></script>
    <script src="/lobstersdk/lobster.js"></script>
    <script src="/jslib/template-web.js"></script>
    <script src="js/reachbottom.js"></script>
    <style>

    </style>
</head>

<body ontouchstart class="page-bd-15">
    <div class="weui-panel__bd" id="tradelist">

    </div>
    <div class="weui-loadmore" id="more">
        <i class="weui-loading"></i>
        <span class="weui-loadmore__tips">正在加载</span>
    </div>
</body>

</html>

<script type="text/template" id="tradetemp">
    {{each list item}}
    <div class="weui-panel__bd">
        <div role="option" class="weui-media-box weui-media-box_text" style="display: flex;justify-content: space-between;">
            <div>
                <strong class="weui-media-box__title">{{item.OrderTypetext}}{{item.PayTypetext}}{{item.TradeMethodtext}}</strong>
                <p class="weui-media-box__desc">{{(item.TradeTime||"").substring(0,19)}}</p>
            </div>
            <div>
                {{if(item.FinancialBalance==1)}}
                <strong class="weui-media-box__title" style="color:#07c160;">{{item.Amount}}</strong>
                {{else}}
                <strong class="weui-media-box__title" style="color:#07c160;">-{{item.Amount}}</strong>
                {{/if}}
                <p class="weui-media-box__desc">余额：{{item.Balance}}</p>
            </div>
        </div> 
    </div>
    {{/each}}
</script>

<script>

    lobsterh5.main({
        data: {
            tradelist: [],
            page: 1,
            limit: 10,
            hasmore: true,
            ordertypelist: [],
            paytypelist: [],
            trademethodlist: []
        },
        //初始化页面
        pageload: function () {
            var self = this;
            self.initevent();
            Promise.all([self.getDic("8330"), self.getDic("8331"), self.getDic("8332")]).then(res => {
                self.data.ordertypelist = res[0].appbasedict;
                self.data.paytypelist = res[1].appbasedict;
                self.data.trademethodlist = res[2].appbasedict;
                self.getradelist();
            }).catch(res => {
                console.log(res.msg || res);
            })
        },
        //初始化事件
        initevent: function () {
            var self = this;
            $(window).lobsterreachbottom({
                onSuccess: function () {
                    self.getradelist();
                }
            });
        },
        getradelist: function () {
            var self = this;
            if (!self.data.hasmore) return;
            $("#more").show();
            lobsterh5.GET("/lowcode/APP20210728142518705/wallet/?fun=wallet.gettradelist", {
                userId: localStorage.getItem("userId"),
                page: self.data.page,
                limit: self.data.limit
            }).then(res => {
                self.data.tradelist = res.data;
                self.data.tradelist.forEach(item => {
                    item.Amount = parseFloat(item.Amount).toFixed(2);
                    item.Balance = parseFloat(item.Balance).toFixed(2);
                    var filter = self.data.ordertypelist.filter(a => { return a.Code == item.OrderType });
                    if (filter.length > 0)
                        item.OrderTypetext = filter[0].Name;
                    filter = self.data.paytypelist.filter(a => { return a.Code == item.PayType });
                    if (filter.length > 0)
                        item.PayTypetext = filter[0].Name;
                    filter = self.data.trademethodlist.filter(a => { return a.Code == item.TradeMethod });
                    if (filter.length > 0)
                        item.TradeMethodtext = filter[0].Name;
                });
                var html = template("tradetemp", { list: self.data.tradelist });
                $("#tradelist").append(html);
                if (res.data.length < self.data.limit) {
                    self.data.hasmore = false;
                    $("#more").text("没有更多了");
                } else {
                    $("#more").hide();
                    self.data.page++;
                }
            }).catch(res => {
                $.toast(res.msg||res, 'forbidden');
            })
        },
        //获取支付类型字典 
        getDic: function (classId) {
            return new Promise((resolve, reject) => {
                lobsterh5.GET("/common/v1/BasicData/GetAppBaseDict", {
                    classId: classId,
                    appKey: "APP20210728142518705"
                }).then(res => {
                    resolve(res);
                }).catch(res => {
                    reject(res);
                });
            })
        },
    })
</script>